
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>网格组件 - UIkit 中文文档</title>
        <meta name="description" content="UIKit中的网格系统遵循移动优先的方式并可容纳多达10个网格列，它使用网格内预定义的类对每个单元格的列宽进行了定义，本文档针对UIKit网格系统进行了详细的介绍。">
        <meta name="author" content="UIkit中文网">
         
<meta name="keywords" content="UIKit网格系统,栅格系统,响应式宽度,嵌套网格,Grid,flex">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li class="uk-active"><a href="core.html">核心组件</a></li>
                    <li><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>

                            <li class="uk-nav-header">默认</li>
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>

                            <li class="uk-nav-header">布局类组件</li>
                            <li class="uk-active"><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>

                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>

                            <li class="uk-nav-header">页面元素</li>
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>

                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>

                            <li class="uk-nav-header">JavaScript组件</li>
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动器</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>

                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1 class="uk-article-title">网格</h1>

                            <p class="uk-article-lead">创建一个完全响应式并可以嵌套的流动网格布局。</p>

                            <p>UIKit中的网格系统遵循移动优先的方式并且最多可容纳10个网格列。它使用网格内预定义的类对每个单元格的列宽进行了定义。另外，还可以把网格与 <a href="flex.html">Flex 组件</a> 中的类组合使用，虽然它只能在现代浏览器中正常运行。</p>

                            <hr class="uk-article-divider">

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">用法</a></h2>

                            <p>向一个父元素添加 <code>.uk-grid</code> 类来创建网格容器。对子元素添加一个 <code>.uk-width-*</code> 类来限定单元格的宽度。网格支持1、2、3、4、5、6和10个单元划分。下面的列表为你提供了可以应用到单元的 <code>uk-width-*</code> 类的概述。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-width-1-1</code></td>
                                            <td>填满可见宽度的100％。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-width-1-2</code></td>
                                            <td>把网格等分为两半。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-width-1-3</code> to <code>.uk-width-2-3</code></td>
                                            <td>将网格划分成三分之一。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-width-1-4</code> to <code>.uk-width-3-4</code></td>
                                            <td>将网格划分成四分之一。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-width-1-5</code> to <code>.uk-width-4-5</code></td>
                                            <td>将网格划分成五分之一。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-width-1-6</code> to <code>.uk-width-5-6</code></td>
                                            <td>将网格划分成六分之一。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-width-1-10</code> to <code>.uk-width-9-10</code></td>
                                            <td>将网格划分成十分之一。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p>我们特意为每组单元建立了一种冗余，所以在实际应用时，<code>.uk-width-5-10</code> 类与 <code>.uk-width-1-2</code> 类的实际效果都是一样的。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <p>仔细看看下面网格的例子，这可以使你了解所有 <code>.uk-width-*</code> 类的基本使用方法。</p>

                            <div class="tm-grid-truncate uk-text-center">

                                <div class="uk-grid">
                                    <div class="uk-width-1-3"><div class="uk-panel uk-panel-box"><code>.uk-width-1-3</code></div></div>
                                    <div class="uk-width-1-3"><div class="uk-panel uk-panel-box"><code>.uk-width-1-3</code></div></div>
                                    <div class="uk-width-1-3"><div class="uk-panel uk-panel-box"><code>.uk-width-1-3</code></div></div>
                                </div>

                                <div class="uk-grid">
                                    <div class="uk-width-1-2"><div class="uk-panel uk-panel-box"><code>.uk-width-1-2</code></div></div>
                                    <div class="uk-width-1-2"><div class="uk-panel uk-panel-box"><code>.uk-width-1-2</code></div></div>
                                </div>

                                <div class="uk-grid">
                                    <div class="uk-width-3-10"><div class="uk-panel uk-panel-box"><code>.uk-width-3-10</code></div></div>
                                    <div class="uk-width-7-10"><div class="uk-panel uk-panel-box"><code>.uk-width-7-10</code></div></div>
                                </div>

                            </div>

                            <p><span class="uk-badge">注意</span> 网格并没有相关联的CSS样式。在示例中，我们使用了 <a href="panel.html">面板组件</a>。</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

                            <p>下面是关于如何使用默认的两列网格代码简单示例：</p>

<pre><code>&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="responsive-width"><a href="#responsive-width" class="uk-link-reset">响应式宽度</a></h2>

                            <p>UIKit中提供了一些非常有用的响应式宽度的类。基本上它们的使用方法就像通常宽度的类一样，但是它们带有前缀，这样它们只在特定的断点来产生效果。这些类可以结合 <a href="utility.html">效果组件</a> 中的可见性类来使用。这对于调整不同尺寸设备的布局和内容是非常重要的。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-width-*</code></td>
                                            <td>对于任何宽度的设备，网格都保持列并排。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-width-small-*</code></td>
                                            <td>影响宽度在 <em>480px</em> 以上的设备。网格列将在较小的视口中堆叠。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-width-medium-*</code></td>
                                            <td>影响宽度在 <em>768px</em> 以上的设备。网格列将在较小的视口中堆叠。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-width-large-*</code></td>
                                            <td>影响宽度在 <em>960px</em> 以上的设备。网格列将在较小的视口中堆叠。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p><span class="uk-badge uk-badge-danger">重要</span> 若要设置网格堆叠列上下间的边距，只需添加 <code>data-uk-grid-margin</code> 属性。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="tm-grid-truncate uk-text-center">
                                <div class="uk-grid" data-uk-grid-margin>
                                    <div class="uk-width-large-1-3 uk-width-medium-1-2"><div class="uk-panel uk-panel-box uk-panel-box-primary"><code>.uk-width-medium-1-2</code> <code>.uk-width-large-1-3</code></div></div>
                                    <div class="uk-width-large-1-3 uk-hidden-medium"><div class="uk-panel uk-panel-box"><code>.uk-hidden-medium</code> <code>.uk-width-large-1-3</code></div></div>
                                    <div class="uk-width-large-1-3 uk-width-medium-1-2"><div class="uk-panel uk-panel-box uk-panel-box-primary"><code>.uk-width-medium-1-2</code> <code>.uk-width-large-1-3</code></div></div>
                                </div>

                                <div class="uk-grid" data-uk-grid-margin>
                                    <div class="uk-width-medium-1-3 uk-width-1-2"><div class="uk-panel uk-panel-box uk-panel-box-secondary"><code>.uk-width-1-2</code> <code>.uk-width-medium-1-3</code></div></div>
                                    <div class="uk-width-medium-1-3 uk-hidden-small"><div class="uk-panel uk-panel-box"><code>.uk-hidden-small</code> <code>.uk-width-medium-1-3</code></div></div>
                                    <div class="uk-width-medium-1-3 uk-width-1-2"><div class="uk-panel uk-panel-box uk-panel-box-secondary"><code>.uk-width-1-2</code> <code>.uk-width-medium-1-3</code></div></div>
                                </div>

                                <div class="uk-grid" data-uk-grid-margin>
                                    <div class="uk-width-1-1 uk-visible-small"><div class="uk-panel uk-panel-box uk-panel-box-secondary"><code>.uk-width-1-1 .uk-visible-small</code></div></div>
                                    <div class="uk-width-medium-1-1 uk-visible-medium"><div class="uk-panel uk-panel-box uk-panel-box-primary"><code>.uk-width-medium-1-1 .uk-visible-medium</code></div></div>
                                    <div class="uk-width-large-1-1 uk-visible-large"><div class="uk-panel uk-panel-box uk-panel-box"><code>.uk-width-large-1-1 .uk-visible-large</code></div></div>
                                </div>
                            </div>

                            <hr class="uk-article-divider">

                            <h2 id="grid-gutter"><a href="#grid-gutter" class="uk-link-reset">网格排水沟/Grid gutter</a></h2>

                            <p>好吧，其实是网格之间的间隔。网格会自动在列之间创建一个水平间距，以及在连续的两个网格间创建一个垂直方向的间隔。默认情况下，网格间隔在大屏幕上看起来会比较宽。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-grid">
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                            </div>

                            <hr class="uk-article-divider">

                            <h3>中等排水沟/Medium gutter</h3>

                            <p>在网格之间应用中等的间隔，只需要添加 <code>.uk-grid-medium</code> 类。</p>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <div class="uk-grid uk-grid-medium">
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                            </div>

                            <hr class="uk-article-divider">

                            <h3>小点的排水沟/Small gutter</h3>

                            <p>在网格之间应用较小的间隔，只需要添加 <code>.uk-grid-small</code> 类。</p>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <div class="uk-grid uk-grid-small">
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                            </div>

                            <hr class="uk-article-divider">

                            <h3>消除排水沟/Collapse gutter</h3>

                            <p>完全地去掉间隔，只需要添加 <code>.uk-grid-collapse</code> 类。</p>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <div class="uk-grid uk-grid-collapse">
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                                <div class="uk-width-1-3"><div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div></div>
                            </div>

                            <hr class="uk-article-divider">

                            <h2 id="nested-grid"><a href="#nested-grid" class="uk-link-reset">网格的嵌套</a></h2>

                            <p>使用嵌套网格你可以轻松地扩展你的网格布局。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="tm-grid-truncate uk-text-center">

                                <div class="uk-grid">
                                    <div class="uk-width-1-2"><div class="uk-panel uk-panel-box"><code>.uk-width-1-2</code></div></div>
                                    <div class="uk-width-1-2">
                                        <div class="uk-grid">
                                            <div class="uk-width-1-2"><div class="uk-panel uk-panel-box uk-panel-box-primary"><code>.uk-width-1-2</code></div></div>
                                            <div class="uk-width-1-2"><div class="uk-panel uk-panel-box uk-panel-box-primary"><code>.uk-width-1-2</code></div></div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;
        &lt;div class="uk-grid"&gt;
            &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
            &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="center-grid"><a href="#center-grid" class="uk-link-reset">居中网格</a></h2>

                            <p>添加 <a href="utility.html">效果组件</a> 中的 <code>.uk-container-center</code> 类来让一个网格居中显示。</p>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <div class="uk-panel uk-panel-box uk-panel-box-primary uk-width-1-2 uk-container-center uk-text-center"><code>.uk-container-center</code></div>

                            <hr class="uk-article-divider">

                            <h2 id="grid-divider"><a href="#grid-divider" class="uk-link-reset">网格分隔线</a></h2>

                            <p>添加 <code>.uk-grid-divider</code> 类用线条分隔网格列。要使用水平线分隔网格，只需在 <code>&lt;hr&gt;</code> 或 <code>&lt;div&gt;</code> 元素添加这个类。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="tm-grid-truncate uk-grid uk-grid-divider uk-text-center" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box"><code>.uk-width-medium-1-3</code></div></div>
                                <div class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box"><code>.uk-width-medium-1-3</code></div></div>
                                <div class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box"><code>.uk-width-medium-1-3</code></div></div>
                            </div>
                            <hr class="uk-grid-divider">
                            <div class="uk-grid uk-grid-divider uk-text-center" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box"><code>.uk-width-medium-1-3</code></div></div>
                                <div class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box"><code>.uk-width-medium-1-3</code></div></div>
                                <div class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box"><code>.uk-width-medium-1-3</code></div></div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-grid uk-grid-divider"&gt;...&lt;/div&gt;
&lt;hr class="uk-grid-divider"&gt;
&lt;div class="uk-grid uk-grid-divider"&gt;...&lt;/div&gt;</code></pre>

                            <p><span class="uk-badge">注意</span> 水平分隔线不能用在含有 <code>uk-push-*</code> 类或 <code>uk-pull-*</code> 类的网格中。</p>

                            <hr class="uk-article-divider">

                            <h2 id="source-ordering"><a href="#source-ordering" class="uk-link-reset">源码排序</a></h2>

                            <p>可以更改列的显示顺序，使其在源代码中保持一个特定的列顺序。添加 <code>.uk-push-*</code> 类，向右移动列。添加 <code>.uk-pull-*</code> 类，向左移动列。这可以使你进行类似翻转移动设备或改变窗口宽度时改变列的显示顺序。这些类还可以用于偏移列，在列之间建立额外的空隙。</p>

                            <p>源码排序对SEO和响应式设计是非常有用的，因为在狭窄的视口中网格会根据标签的源代码顺序来显示。</p>

                            <p><span class="uk-badge">注意</span> 此功能只能结合 <code>.uk-width-medium-*</code> 类来使用。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-grid uk-text-center" data-uk-grid-margin>
                                <div class="uk-width-medium-1-2 uk-push-1-2"><div class="uk-panel uk-panel-box"><code>.uk-width-medium-1-2 .uk-push-1-2</code></div></div>
                                <div class="uk-width-medium-1-2 uk-pull-1-2"><div class="uk-panel uk-panel-box"><code>.uk-width-medium-1-2 .uk-pull-1-2</code></div></div>
                            </div>

                            <div class="uk-grid uk-text-center" data-uk-grid-margin>
                                <div class="uk-width-medium-2-5 uk-push-3-5"><div class="uk-panel uk-panel-box"><code>.uk-width-medium-2-5 .uk-push-3-5</code></div></div>
                                <div class="uk-width-medium-2-5 uk-pull-2-5"><div class="uk-panel uk-panel-box"><code>.uk-width-medium-2-5 .uk-pull-2-5</code></div></div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-medium-1-2 uk-push-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-medium-1-2 uk-pull-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="match-column-heights"><a href="#match-column-heights" class="uk-link-reset">匹配列的高度</a></h2>

                            <p>要匹配网格列的高度，只需要在你的网格添加 <code>data-uk-grid-match</code> 属性。如果你的网格包含多个row，只有同一个row中的网格列会被匹配。只需要使用 <code>data-uk-grid-match="{row: false}"</code> 属性就能跨越row的隔阂来匹配网格列的高度。<p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-grid uk-grid-divider" data-uk-grid-match>
                                <div class="uk-width-medium-1-3">Lorem ipsum dolor sit amet.</div>
                                <div class="uk-width-medium-1-3">Lorem ipsum dolor sit amet.</div>
                                <div class="uk-width-medium-1-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-grid" data-uk-grid-match&gt;...&lt;/div&gt;</code></pre>

                            <p><span class="uk-badge">注意</span> 如果网格列的宽度延伸到100%，它们的高度将不再匹配。这样做是有道理的，比如说，当它们在一个较窄的视口中堆叠时。</p>

                            <hr class="uk-article-divider">

                            <h3>匹配面板的高度</h3>

                            <p>如果想要匹配一个网格中多个面板的高度，只需要添加 <code>.uk-grid-match</code> 类。在使用data属性时，必须添加 <code>{target:'.uk-panel'}</code> 选择器。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-grid uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-panel uk-panel-box">Lorem ipsum dolor sit amet.</div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-panel uk-panel-box">Lorem ipsum dolor sit amet.</div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-panel uk-panel-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-grid uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}"&gt;
    &lt;div class="uk-width-medium-1-3"&gt;
        &lt;div class="uk-panel"&gt;...&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="wrap-multiple-rows"><a href="#wrap-multiple-rows" class="uk-link-reset">包装多个行（row）</a></h2>

                            <p>你也可以创建一个网格，使其包含任意多个列，这些列会自动地换到下一行。只需添加 <code>data-uk-grid-margin</code> 属性，就能创建网格行（row）之间的margin。通常这样的布局使用了 <code>&lt;ul&gt;</code> 元素。</p>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <ul class="uk-grid uk-text-center" data-uk-grid-margin>
                                <li class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width-medium-1-3"><div class="uk-panel uk-panel-box">Box</div></li>
                            </ul>

                            <p><span class="uk-badge">注意</span> 你也可以对网格列的宽度进行自定义。只需添加 <code>.uk-width</code> 类，并使用内联样式定义宽度。下面的例子对宽度使用了固定的像素值，对于图片你也可以这样做。</p>

                            <ul class="uk-grid uk-text-center" data-uk-grid-margin>
                                <li class="uk-width" style="width: 100px;"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width" style="width: 120px;"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width" style="width: 140px;"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width" style="width: 160px;"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width" style="width: 180px;"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width" style="width: 200px;"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width" style="width: 220px;"><div class="uk-panel uk-panel-box">Box</div></li>
                                <li class="uk-width" style="width: 240px;"><div class="uk-panel uk-panel-box">Box</div></li>
                            </ul>

                            <h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;ul class="uk-grid" data-uk-grid-margin&gt;

    &lt;!-- 这些元素使用百分比宽度 --&gt;
    &lt;li class="uk-width-medium-1-5"&gt;...&lt;/li&gt;
    &lt;li class="uk-width-medium-3-10"&gt;...&lt;/li&gt;

    &lt;!-- 这些元素使用像素值宽度 --&gt;
    &lt;li class="uk-width" style="width: 100px;"&gt;...&lt;/li&gt;
    &lt;li class="uk-width" style="width: 150px;"&gt;...&lt;/li&gt;

&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="even-grid-columns"><a href="#even-grid-columns" class="uk-link-reset">均匀的网格列</a></h2>

                            <p>要创建一个子元素的宽度都是均匀分割的网格，你不必为网格中的每个列表元素里添加同样的类。只需要添加一个 <code>.uk-grid-width-*</code> 类到网格本身即可。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-grid-width-1-2</code></td>
                                            <td>将网格均匀分为两份</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-grid-width-1-3</code></td>
                                            <td>将网格均匀分为三份</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-grid-width-1-4</code></td>
                                            <td>将网格均匀分为四份</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-grid-width-1-5</code></td>
                                            <td>将网格均匀分为五份</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-grid-width-1-6</code></td>
                                            <td>将网格均匀分为六份</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-grid-width-1-10</code></td>
                                            <td>将网格均匀分为十份</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <ul class="uk-grid uk-grid-width-1-5 uk-text-center">
                                <li><div class="uk-panel uk-panel-box">Box</div></li>
                                <li><div class="uk-panel uk-panel-box">Box</div></li>
                                <li><div class="uk-panel uk-panel-box">Box</div></li>
                                <li><div class="uk-panel uk-panel-box">Box</div></li>
                                <li><div class="uk-panel uk-panel-box">Box</div></li>
                            </ul>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;ul class="uk-grid uk-grid-width-1-5"&gt;
    &lt;li&gt;...&lt;/li&gt;
    &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>响应式宽度</h3>

                            <p>UIkit同样提供了网格的响应式宽度类。可以用它保持均匀尺寸的网格列，无论设备宽度如何。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-grid-width-*</code></td>
                                            <td>影响所有设备宽度</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-grid-width-small-*</code></td>
                                            <td>影响 <em>480px</em> 以上的设备宽度。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-grid-width-medium-*</code></td>
                                            <td>影响 <em>768px</em> 以上的设备宽度。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-grid-width-large-*</code></td>
                                            <td>影响 <em>960px</em> 以上的设备宽度。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-grid-width-xlarge-*</code></td>
                                            <td>影响 <em>1220px</em> 以上的设备宽度。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <ul class="uk-grid uk-grid-width-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5 uk-text-center" data-uk-grid-margin>
                                <li><div class="uk-panel uk-panel-box">Box</div></li>
                                <li><div class="uk-panel uk-panel-box">Box</div></li>
                                <li><div class="uk-panel uk-panel-box">Box</div></li>
                                <li><div class="uk-panel uk-panel-box">Box</div></li>
                                <li><div class="uk-panel uk-panel-box">Box</div></li>
                            </ul>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;ul class="uk-grid uk-grid-width-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5"&gt;
    &lt;li&gt;...&lt;/li&gt;
    &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</code></pre>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>